// @ts-check
import React, { Component } from 'react'
import createGame from '../../game'
import './Game.css'

class GameContainer extends Component {
  static propTypes = {
  }

  state = {
    info: '',
    isPointerLocked: false
  }

  isCursorLocked = false

  componentDidMount() {
    this.game = createGame({
      canvas: this.canvas,
      onNext: this.handleNext,
      onPointerLockChange: this.handlePointerLockChange
    })
    this.game.start()
  }

  componentWillUnmount() {
    this.game.destroy()
  }

  handleNext = () => {
    const y = this.game.controls.viewYDeg * 180 / Math.PI
    const x = this.game.controls.viewXDeg * 180 / Math.PI
    this.setState({
      info: `x: ${x}, y: ${y}`
    })
  }

  handlePointerLockChange = status => {
    this.setState({
      isPointerLocked: status
    })
  }

  render() {
    const { info } = this.state
    return (
      <div>
        <div className="fps-info">{info}</div>
        <canvas
          ref={ref => { this.canvas = ref }}
        />
      </div>
    )
  }
}

export default GameContainer
